import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, InputNumber } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';


const { Title, Text } = Typography;
const { TextArea } = Input;

export default function ShopIntroduction() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 定义需要引导的DOM引用
  const shopNameRef = useRef<HTMLDivElement>(null);
  const industryRef = useRef<HTMLDivElement>(null);
  const targetAudienceRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const mainProductsRef = useRef<HTMLDivElement>(null);
  const businessPhilosophyRef = useRef<HTMLDivElement>(null);
  const competitiveAdvantagesRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  // 引导步骤配置
  const targetRefs = {
    shopNameRef,
    industryRef,
    targetAudienceRef,
    styleRef,
    mainProductsRef,
    businessPhilosophyRef,
    competitiveAdvantagesRef,
    generateButtonRef,
    resultRef,
  };

  const tourSteps = [
    {
      key: 'shopNameRef',
      title: '店铺名称',
      description: '请输入您的店铺名称，这是生成店铺介绍的核心信息',
    },
    {
      key: 'industryRef',
      title: '所属行业',
      description: '选择您店铺所属的行业类别，帮助AI生成更精准的内容',
    },
    {
      key: 'targetAudienceRef',
      title: '目标客群',
      description: '指定您的主要客户群体，使内容更贴合目标受众',
    },
    {
      key: 'styleRef',
      title: '文案风格',
      description: '选择您想要的文案风格，如专业严谨、亲切活泼或高端奢华',
    },
    {
      key: 'mainProductsRef',
      title: '主要产品',
      description: '可选：列出您店铺的主要产品，每行一个产品',
    },
    {
      key: 'businessPhilosophyRef',
      title: '经营理念',
      description: '可选：填写您店铺的经营理念，让介绍更具特色',
    },
    {
      key: 'competitiveAdvantagesRef',
      title: '竞争优势',
      description: '可选：描述您店铺的竞争优势，突出独特卖点',
    },
    {
      key: 'generateButtonRef',
      title: '生成按钮',
      description: '填写完信息后，点击此按钮生成店铺介绍',
    },
    {
      key: 'resultRef',
      title: '生成结果',
      description: '生成的店铺介绍将显示在这里，您可以复制或下载内容',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已渲染完成
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成店铺介绍的模拟函数
  const generateContent = (
    shopName: string,
    industry: string,
    mainProducts: string,
    businessPhilosophy: string,
    targetAudience: string,
    competitiveAdvantages: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 店铺介绍标题
    result += `🏪 ${shopName}店铺介绍\n\n`;

    // 店铺简介
    result += `【店铺简介】\n`;
    if (style === '专业严谨') {
      result += `${shopName}是一家专注于${industry}领域的专业店铺，致力于为广大消费者提供高品质的${mainProducts}。\n`;
    } else if (style === '亲切活泼') {
      result += `你好呀！欢迎来到${shopName}~ 我们是一家热爱${industry}的小店，主打${mainProducts}，希望能给你带来惊喜！\n`;
    } else if (style === '高端奢华') {
      result += `${shopName}——${industry}领域的高端品牌，为追求品质生活的您提供卓越的${mainProducts}和尊贵的购物体验。\n`;
    }

    // 经营理念
    result += `\n【经营理念】\n`;
    if (businessPhilosophy) {
      result += `💡 ${businessPhilosophy}\n`;
    } else {
      result += `💡 我们始终坚持"品质第一，顾客至上"的经营理念，用心做好每一件产品，真诚服务每一位顾客。\n`;
    }

    // 主要产品
    result += `\n【主要产品】\n`;
    if (mainProducts) {
      const products = mainProducts.split('\n').filter(p => p.trim());
      products.forEach((product, index) => {
        result += `🛍️ ${index + 1}. ${product}\n`;
      });
    } else {
      result += `🛍️ 我们提供丰富多样的${industry}产品，满足不同客户的需求。\n`;
    }

    // 目标客群
    result += `\n【目标客群】\n`;
    if (targetAudience === '年轻人') {
      result += `👱‍♀️ 我们主要面向追求时尚、个性的年轻消费者群体。\n`;
    } else if (targetAudience === '职场人士') {
      result += `💼 我们主要服务于注重品质、效率的职场人士。\n`;
    } else if (targetAudience === '家庭用户') {
      result += `👨‍👩‍👧‍👦 我们致力于为家庭用户提供实用、安全的产品。\n`;
    } else if (targetAudience === '高端客户') {
      result += `💎 我们专注于为追求高品质生活的高端客户提供定制化服务。\n`;
    }

    // 竞争优势
    result += `\n【竞争优势】\n`;
    if (competitiveAdvantages) {
      const advantages = competitiveAdvantages.split('\n').filter(a => a.trim());
      advantages.forEach((advantage, index) => {
        result += `✨ ${index + 1}. ${advantage}\n`;
      });
    } else {
      result += `✨ 1. 优质的产品质量和完善的售后服务\n`;
      result += `✨ 2. 具有竞争力的价格和丰富的产品选择\n`;
      result += `✨ 3. 专业的团队和先进的生产技术\n`;
      result += `✨ 4. 良好的品牌信誉和口碑\n`;
    }

    // 服务承诺
    result += `\n【服务承诺】\n`;
    result += `✓ 7天无理由退换货\n`;
    result += `✓ 专业的售前咨询和售后服务\n`;
    result += `✓ 安全便捷的支付方式\n`;
    result += `✓ 快速可靠的物流配送\n`;

    // 店铺愿景
    result += `\n【店铺愿景】\n`;
    if (style === '专业严谨') {
      result += `我们希望成为${industry}领域的领军企业，为行业发展做出贡献，为消费者创造更大价值。\n`;
    } else if (style === '亲切活泼') {
      result += `我们希望能成为你的好朋友，陪伴你度过每一个美好的日子！\n`;
    } else if (style === '高端奢华') {
      result += `我们致力于打造${industry}领域的顶级品牌，为尊贵的您提供无与伦比的产品和服务。\n`;
    }

    // 结尾召唤
    result += `\n【加入我们】\n`;
    result += `欢迎关注${shopName}，了解更多产品信息和优惠活动！\n`;
    result += `我们期待与您一起共创美好未来！🎉\n`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { shopName, industry, mainProducts, businessPhilosophy, targetAudience, competitiveAdvantages, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(shopName, industry, mainProducts, businessPhilosophy, targetAudience, competitiveAdvantages, style);
      setGeneratedContent(generated);
      message.success('店铺介绍生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '店铺介绍.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 行业选项
  const industryOptions = [
    { label: '服装鞋包', value: '服装鞋包' },
    { label: '美妆个护', value: '美妆个护' },
    { label: '家居日用', value: '家居日用' },
    { label: '数码电器', value: '数码电器' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '图书文具', value: '图书文具' },
    { label: '运动户外', value: '运动户外' },
    { label: '其他', value: '其他' },
  ];

  // 目标客群选项
  const audienceOptions = [
    { label: '年轻人', value: '年轻人' },
    { label: '职场人士', value: '职场人士' },
    { label: '家庭用户', value: '家庭用户' },
    { label: '高端客户', value: '高端客户' },
  ];

  // 风格选项
  const styleOptions = [
    { label: '专业严谨', value: '专业严谨' },
    { label: '亲切活泼', value: '亲切活泼' },
    { label: '高端奢华', value: '高端奢华' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
          <Title level={2} style={{ marginBottom: 0 }}>店铺介绍生成<TourGuideButton onClick={showTour} /></Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              industry: '服装鞋包',
              targetAudience: '年轻人',
              style: '亲切活泼',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <div ref={shopNameRef}>
                  <Form.Item
                    name="shopName"
                    label="店铺名称"
                    rules={[{ required: true, message: '请输入店铺名称' }]}
                  >
                    <Input placeholder="请输入店铺名称" />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div ref={industryRef}>
                  <Form.Item
                    name="industry"
                    label="所属行业"
                    rules={[{ required: true, message: '请选择所属行业' }]}
                  >
                    <Select placeholder="请选择所属行业" options={industryOptions} />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div ref={targetAudienceRef}>
                  <Form.Item
                    name="targetAudience"
                    label="目标客群"
                    rules={[{ required: true, message: '请选择目标客群' }]}
                  >
                    <Select placeholder="请选择目标客群" options={audienceOptions} />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div ref={styleRef}>
                  <Form.Item
                    name="style"
                    label="文案风格"
                    rules={[{ required: true, message: '请选择文案风格' }]}
                  >
                    <Select placeholder="请选择文案风格" options={styleOptions} />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24}>
                <div ref={mainProductsRef}>
                  <Form.Item
                    name="mainProducts"
                    label="主要产品（可选）"
                  >
                    <TextArea rows={3} placeholder="请输入店铺的主要产品，每行一个产品，如不填写将自动生成" />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24}>
                <div ref={businessPhilosophyRef}>
                  <Form.Item
                    name="businessPhilosophy"
                    label="经营理念（可选）"
                  >
                    <TextArea rows={2} placeholder="请输入店铺的经营理念，如不填写将使用默认理念" />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24}>
                <div ref={competitiveAdvantagesRef}>
                  <Form.Item
                    name="competitiveAdvantages"
                    label="竞争优势（可选）"
                  >
                    <TextArea rows={3} placeholder="请输入店铺的竞争优势，每行一个优势，如不填写将自动生成" />
                  </Form.Item>
                </div>
              </Col>
              <Col xs={24}>
                <div ref={generateButtonRef}>
                  <Form.Item>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成店铺介绍'}
                    </Button>
                  </Form.Item>
                </div>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <div ref={resultRef}>
            <Card title="生成结果" extra={
              <div style={{ display: 'flex', gap: '8px' }}>
                <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
                <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
              </div>
            }>
              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
                {generatedContent}
              </div>
            </Card>
          </div>
        )}
      </div>
      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={targetRefs}
      />
    </>
  );
}